<template>
    <div class="app-container">
        <el-card class="box-card">
            <h3>创建单个账号</h3>
            <el-form ref="user" :rules="rules" :model="user" label-width="150px">
                <el-form-item label="初始金额" prop="balance">
                    <el-input v-model="user.balance" />
                </el-form-item>
                <el-form-item label="账号名" prop="username">
                    <el-input v-model="user.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="user.password" />
                </el-form-item>
            </el-form>
        </el-card>

        <div class="op-container">
            <el-button @click="Cancel">取消 / 清空</el-button>
            <el-button type="primary" @click="Publish">创建账号</el-button>
        </div>
    </div>
</template>

<style>
</style>

<script>
import { createUser } from '../../../api/index';
export default {
    name: 'createUser',

    data() {
        return {
            user: { balance: '', password: '', username: '' },
            rules: {
                balance: [{ required: true, message: '初始金额不能为空', trigger: 'blur' }],
                username: [{ required: true, message: '账号名不能为空', trigger: 'blur' }],
                password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
            }
        };
    },
    computed: {
        headers() {
            return {};
        }
    },
    created() {},

    methods: {
        // 取消创建
        Cancel: function() {
            this.user.balance = '';
            this.user.username = '';
            this.user.password = '';
        },
        //   创建该券
        Publish: function() {

            this.$refs.user.validate(valid => {
                if (valid) {
                    const user = this.user;
                    createUser(user)
                        .then(res => {
                                // 如果页面数据不为空
                                if (!!res.errno && res.errno != 200) {
                                    this.$notify.error({
                                        title: '失败',
                                        message: res.errmsg
                                    });
                                } else {
                                    this.$notify.success({
                                        title: '成功',
                                        message: '创建成功'
                                    });
                                    console.log(res);
                                }
                        })
                        .then(err => {
                            console.log(err);
                        });

                }else {
                    this.$notify.error({
                        title: '失败',
                        message: '请填写数据'
                    });
                }
            })
        }
    }
};
</script>
